var first = document.getElementById('first'),
    second = document.getElementById('second'),
    third = document.getElementById('third'),
    od = document.getElementById('od'),
    sp = document.getElementById('sp'),
    cf = document.getElementById('cf');

$(function () {
    $('#newOrder').on('submit', function (e) {
        e.preventDefault();
        var newOrderData = $('#newOrder').serialize();
        $.ajax({
            type: 'POST',
            url: 'http://localhost:8080/web_JPetStore/newOrder',
            data: newOrderData,
            success: function (data) {
                if (data === 'wanted') {
                    first.className = '';
                    second.className = 'active';
                    od.style.display = 'none';
                    sp.style.display = 'block';

                } else {
                    let bill = document.getElementsByClassName('bill');
                    let newShip = document.getElementsByClassName('newS');
                    for (let i = 0, length = bill.length; i < length; i++) {
                        newShip[i].innerHTML = bill[i].value;
                    }
                    first.className = '';
                    third.className = 'active';
                    od.style.display = 'none';
                    cf.style.display = 'block';
                }
            },
            error: function (errorMsg) {
                console.log(errorMsg);
            }
        });
    });

    $('#shippingAddress').on('submit', function (e) {
        e.preventDefault();
        var shippingAddressData = $('#shippingAddress').serialize();
        $.ajax({
            type: 'POST',
            url: 'http://localhost:8080/web_JPetStore/shippingAddress',
            data: shippingAddressData,
            success: function (data) {
                if (data === 'view') {
                    var ship = document.getElementsByClassName('ship'),
                        newShip = document.getElementsByClassName('newS');
                    for (let i = 0, length = newShip.length; i < length; i++) {
                        newShip[i].innerHTML = ship[i].value;
                    }
                    second.className = '';
                    third.className = 'active';
                    sp.style.display = 'none';
                    cf.style.display = 'block';
                }
            },
            error: function (errorMsg) {
                console.log(errorMsg);
            }
        });
    });
});

